import React from 'react';
import { connect } from 'dva';
//import PropTypes from 'prop-types';
import { Card, Form, Input, Button, Divider } from 'antd';
import { Row, Col } from 'antd';
import { message } from 'antd';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const User = ({ dispatch, user }) => {
    const [form] = Form.useForm();
    async function handleHello() {
        try {
            const {name} = await form.validateFields();
            dispatch({
                type: 'user/hello',
                payload: {name: name},
            });
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
            const { errorFields } = errorInfo
            const msg = errorFields.map(item => item.errors[0])
            message.error(msg);
        }
    }
  return (
    <Row style={{marginTop: 100}}>
        <Col span={10} offset={7}>
    <Card title="用户">
    <Form form={form} {...layout}>
        <Row>
            <Col span={12}>
                <Form.Item name="name" label="姓名" rules={[{ required: true, message: '姓名必填' }]}>
                    <Input style={{width:300}} placeholder="请输姓名"/>
                </Form.Item>
            </Col>
        </Row>
        <Divider />
        <Row>
            <Col span={12}>
                <Form.Item label="结果">
                    <Input style={{width:300}} value={user.name} readOnly={true}/>
                </Form.Item>
            </Col>
        </Row>
        <Divider />
        <Form.Item label=" " labelCol={{span:4}} colon={false}>
            <Button type="primary" style={{ margin: '0 8px' }} onClick={handleHello}>
                操作
            </Button>
        </Form.Item>
    </Form>
    </Card>
    </Col>
    </Row>
  );
};

User.propTypes = {
};

//export default Calculator;
export default connect(({ user }) => ({
    user
}))(User);